<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>成绩表</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        table{
            border-spacing: 0;
            border-collapse: collapse;
            margin: 50px auto;
        }
        td{
            padding: 10px 40px;
            height: 20px;
            line-height: 20px;
            border: 1px solid #000;
            text-align: center;
        }
        caption{
            font-size: 20px;
            margin: 10px auto;
        }
    </style>
</head>
<body>
    <table>
        <caption>成绩单</caption>
        <thead>
            <td>学号</td>
            <td>语文</td>
            <td>数学</td>
            <td>英语</td>
            <td>总成绩</td>
            <td>备注</td>
        </thead>
        <tbody>
            <!-- <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr> -->
        </tbody>
    </table>


    <script>
        // 1.创建数据
        var stu = [
            {xuehao:1,name:'zhangsan',chinese:105,math:62,english:118},
            {xuehao:2,name:'lisi',chinese:89,math:78,english:120},
            {xuehao:3,name:'wangwu',chinese:86,math:64,english:80},
            {xuehao:4,name:'zhaoliu',chinese:78,math:99,english:91},
            {xuehao:5,name:'sunqi',chinese:107.5,math:97,english:70},
            {xuehao:6,name:'zhouba',chinese:112,math:61,english:92},
            {xuehao:7,name:'wujiu',chinese:101,math:79,english:104},
            {xuehao:8,name:'zhengshi',chinese:72,math:78,english:105},
            {xuehao:9,name:'liuyi',chinese:56,math:68,english:61},
            {xuehao:10,name:'chener',chinese:98,math:83,english:77}
        ]

        var tb = document.getElementsByTagName('tbody')[0];
        
        // 2.循环各学生计算总成绩
        
        for(var i=0;i<stu.length;i++){
            stu[i].total = stu[i].chinese + stu[i].math + stu[i].english;
        }
        // console.log(stu);

        /* // 封装数组里的对象属性值进行比较后进行降序排序【？不会】
        function compare(property) {
            return function (a, b) {
                var value1 = a[property];
                var value2 = b[property];
                // 降序
                return value2 - value1;
            }
        } */

        // 3. 记录各科最高成绩：降序取第一位有最高学分科的学生
        var cMax = stu.sort(function(a,b){
            return b.chinese - a.chinese;
        })[0].chinese;
        var mMax = stu.sort(function(a,b){
            return b.math - a.math;
        })[0].math;
        var eMax = stu.sort(function(a,b){
            return b.english - a.english;
        })[0].english;
        console.log(cMax,mMax,eMax);

        // 4.降序处理方便字符串拼接
        stu.sort(function(a,b){
            return b.total - a.total;
        });

        // 5.循环拼接插入
        for(var i=0;i<stu.length;i++){

            // 备注
            var tips = '';

            if(stu[i].chinese === cMax){
                tips = '语文成绩最高';
            }else if(stu[i].math === mMax){
                tips = '数学成绩最高';
            }else if(stu[i].english === eMax){
                tips = '英语成绩最高';
            }

            tb.innerHTML += '<tr><td>'+ stu[i].xuehao +'</td><td>'+ stu[i].chinese +'</td><td>'+ stu[i].math +'</td><td>'+ stu[i].english +'</td><td>'+ (stu[i].english + stu[i].chinese + stu[i].math) +'</td><td>' + tips + '</td></tr>';
        }
    
    </script>
</body>
</html>